<template>
  <div class="home">
    <h2>小程序后台系统</h2>
    <el-form  :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="请输入需要删除的学员id">
        <el-input v-model="formInline.user" placeholder="注意，此id是小程序登录之后返回的id"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">删除</el-button>
      </el-form-item>
    </el-form>
    <el-table
    :data="list"
    border
    :height="hei"
    style="width: 100%">
    <el-table-column
      prop="name"
      label="姓名"
     >
    </el-table-column>
    <el-table-column
      label="当前申请状态"
     >
     <template slot-scope="scope" >
       <div>
         <span>{{scope.row.status}}: </span>
         <span>{{scope.row.statusText}} </span>
       </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="age"
      label="年龄">
    </el-table-column>
    <el-table-column
      prop="sex"
      label="性别">
    </el-table-column>
    <el-table-column
      prop="tel"
      label="电话">
    </el-table-column>
    <el-table-column
      prop="education"
      label="学历">
    </el-table-column>
    <el-table-column
      prop="major"
      label="专业">
    </el-table-column>
    <el-table-column
      prop="school"
      label="学校名称">
    </el-table-column>
    <el-table-column
      prop="oldJob"
      label="过去职位">
    </el-table-column>
    <el-table-column
      prop="classType"
      label="课程类型">
    </el-table-column>
    <el-table-column
      prop="addTime"
      label="申请时间">
    </el-table-column>
    <el-table-column
    fixed="right"
    width="120"
      label="操作">
       <template slot-scope="scope" >
        <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
        <el-button style="margin-left:0" @click="confirmZhan(scope.row)" type="text" size="small">确认占座申请</el-button>
        <el-button style="margin-left:0" @click="confirmRu(scope.row)" type="text" size="small">确认入学申请</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="start"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
    <el-dialog :close-on-click-modal="false" :show-close="false" title="登录提示" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名称"  label-width="80px">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户密码"  label-width="80px">
          <el-input v-model="form.password" show-password autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        
        <el-button type="primary" @click="login">登录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogFormVisible:false,
      list:[],
      start:1,
      limit:5,
      total:0,
      hei:0,
      form:{
        name:"admin",
        password:"123456"
      },
      formInline:{
        user:""
      }
    }
  },
  methods: {
    onSubmit(){
      this.$ajax.get("/admin/xy/lite/student/del",{
        params:{
          id:this.formInline.user
        }
      })
      .then(res =>{
        if(res.code == "success"){
          this.$message({
            type:"success",
            message:"删除成功"
          })
          this.init()
        }else{
          this.$message.error("删除失败")
        }
      })

    },
    confirmZhan(e){
      this.$ajax.get("/admin/xy/student/confirmZhan",{
        params:{
          id:e.id
        }
      })
      .then(res =>{
        if(res.code == "success"){
          this.$message({
            message: '占座申请通过',
            type: 'success'
          });
          this.start = 1;
          this.init();
        }
      })
    },
    confirmRu(e){
      this.$ajax.get("/admin/xy/student/confirmRu",{
        params:{
          id:e.id
        }
      })
      .then(res =>{
        if(res.code == "success"){
          this.$message({
            message: '入学申请通过',
            type: 'success'
          });
          this.start = 1;
          this.init();
        }
      })
    },
    handleClick(e){
      this.$ajax.get("/admin/xy/lite/student/del",{
        params:{
          id:e.id
        }
      })
      .then(res =>{
        if(res.code == "success"){
           this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.init()
        }
      })
    },
    handleSizeChange(res){
      this.limit = res;
      this.init();
    },
    handleCurrentChange(res){
      this.start = res;
      this.init()
    },
    login(){
      this.$ajax.post("/admin/login/doLogin",{
        username:this.form.name,
        password:this.form.password
      })
      .then(res =>{
        if(res.code == "S"){
          this.$message({
            message: '登录成功',
            type: 'success'
          });
          localStorage.setItem("token",res.token);
          this.dialogFormVisible = false
          this.init();
        }else{
          this.$message.error("登录失败，请检查用户名")
        }
      })
    },
    init(){
      this.$ajax.get("/admin/xy/lite/student/list",{
        params:{
          start:this.start,
          limit:this.limit
        }
        
      })
      .then(res =>{
        res.data.list.forEach(ele =>{
          ele.sex = parseInt(ele.sex) ? "男":"女";
          ele.education = ["高中","大专","本科","本科以上"][ele.education];
          ele.classType = parseInt(ele.classType) ? "H5":"UI",
          ele.statusText = ["初始状态","发送占位申请中","可以进行入学申请","发送入学申请中","入学申请通过","已毕业"][parseInt(ele.status)]
        })
        this.list = res.data.list;
        this.total = res.data.totalRow
      })
    }
  },
  created () {
    this.dialogFormVisible = true
    // var token = localStorage.getItem("token");
    // if(token){
    //   this.init()
    // }else{
    //   this.dialogFormVisible = true
    // }
    // this.init()
  },
  mounted () {
    var _this = this;
    window.onload = window.onresize = function(){
      _this.hei =  document.body.offsetHeight - 170;
    }
  }
}
</script>
<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
h2{
  padding-top: 30px;
}
body{
  height: 100vh;
  padding: 0 50px;
}
.demo-form-inline{
  text-align: left;
}
</style>
